<template>
  <div>
    <Form
      name="addForm"
      ref="formAdd"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      @finish="onFinish"
    >
      <Card style="width: 100%" title="编辑角色">
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleName"
              label="角色名称"
              initialValue=""
              :rules="usernameRules"
            >
              <Input placeholder="请输入角色名称" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleSort"
              label="角色顺序"
              initialValue="0"
              :rules="orderRules"
            >
              <InputNumber :min="0" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem name="remark" label="描述" initialValue="">
              <Input placeholder="请输入描述" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem name="status" label="状态">
              <Switcher type="text" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleKey"
              label="权限字符"
              initialValue=""
              :rules="roleStringRules"
            >
              <Input placeholder="请输入权限字符" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
      </Card>
      <Card style="width: 100%" title="请选择权限">
        <Row>
          <Col :span="12" :offset="9">
            <FormItem name="menuIds" initialValue="">
              <Tree
                v-if="menuOptions.length > 0"
                checkable
                :treeData="menuOptions"
                :expandedKeys="expandedKeys2"
                @expand="onExpand2"
                v-model="value2"
                @change="change2"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <FormItem :wrapperCol="24" style="text-align: center">
              <Button
                type="primary"
                size="md"
                style="width: 100px"
                @click="sumbitForm"
                >提交</Button
              >
              <Button
                style="margin-left: 20px; width: 100px"
                size="md"
                @click="resetForm"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Card>
    </Form>
  </div>
</template>

<script>
import {
  listRole,
  getRole,
  delRole,
  addRole,
  updateRole,
  dataScope,
  changeRoleStatus,
} from "@/api/system/role";
import {
  treeselect as menuTreeselect,
  roleMenuTreeselect,
} from "@/api/system/menu";
import { Modal } from "@uni/vue";
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      labelColW: {
        span: 4,
      },
      wrapperCol: {
        span: 12,
      },
      wrapperColW: {
        span: 18,
      },
      // 菜单列表
      menuOptions: [],
      value2: [],
      expandedKeys2: [],
      // 验证
      usernameRules: [{ required: true, message: "请输入角色名称" }],
      orderRules: [{ required: true, message: "请输入角色顺序" }],
      roleStringRules: [{ required: true, message: "请输入权限字符" }],
    };
  },
  computed: {
    mockDataCom() {
      for (let i = 0; i < 10; i += 1) {
        const item = (name) => {
          return {
            key: `${name}-${i.toString()}`,
            title: `集团法务部${i}`,
          };
        };
        this.mockData.push(item("demo1"));
        return this.mockData;
      }
    },
  },
  created() {
    this.getMenuTreeselect();
    console.log(this);
  },
  methods: {
    resetForm() {
      this.$router.push("roleManagement");
    },
    sumbitForm() {
      this.$refs.formAdd.submit();
    },
    onFinish(values) {
      values.status == true ? (values.status = "0") : (values.status = "1");
      values.menuIds = values.menuIds.map((item, index) => {
        return Number(item);
      });
      values.deptCheckStrictly = true;
      values.roleSort = Number(values.roleSort);
      values.menuCheckStrictly = true;
      values.deptIds = [];
      addRole(values).then((response) => {
        Modal.success({
          title: "新增成功",
          maskClosable: true,
        });
        this.$router.push("roleManagement");
      });
    },
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.children) && org.children.length > 0;
      if (haveChildren) {
        return {
          title: org.label,
          value: String(org.id),
          children: org.children.map((i) => this.mapTree(i)),
        };
      } else {
        return {
          title: org.label,
          value: String(org.id),
        };
      }
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      let that = this;
      menuTreeselect().then((response) => {
        let array = response.data.map((org) => that.mapTree(org));
        this.menuOptions = array;
      });
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTreeselect(roleId).then((response) => {
        this.menuOptions = response.menus;
        return response;
      });
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
    updateModel(val) {
      console.log("change", val);
    },
    change2(value) {
      this.value2 = value;
    },
    onExpand2(expandedKeys) {
      this.expandedKeys2 = expandedKeys;
    },
  },
};
</script>


